<template>
	<view class="container">
		<view class="headerNav"><u-navbar title="账号认证" @leftClick="goBack" placeholder></u-navbar></view>
		<view class="bigview">
			<view class="newsList">
				<view class="left"><text>手机认证</text></view>
				<view class="right" @tap="touser(1)">
					<text
						:style="data.userdata.mobile?'color:#101010;':'color:#BBBBBB;'">{{data.userdata.mobile || "未绑定"}}</text>
					<u-icon size="35" color="#BBBBBB" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="newsList">
				<view class="left"><text>绑定邮箱</text></view>
				<view class="right" @tap="touser(2)">
					<text
						:style="data.userdata.email?'color:#101010;':'color:#BBBBBB;'">{{data.userdata.email || "未绑定"}}</text>
					<u-icon size="35" color="#BBBBBB" name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- <view class="newsList">
				<view class="left"><text>腾讯QQ</text></view>
				<view class="right" @tap="touser(3)">
					<text
						:style="data.userdata.bind_qq?'color:#101010;':'color:#BBBBBB;'">{{data.userdata.bind_qq || "未绑定"}}</text>
					<u-icon size="35" color="#BBBBBB" name="arrow-right"></u-icon>
				</view>
			</view> -->
			<view class="newsList">
				<view class="left"><text>微信</text></view>
				<view class="right" @tap="touser(4)">
					<text
						:style="data.userdata.bind_weixin?'color:#101010;':'color:#BBBBBB;'">{{data.userdata.bind_weixin==1? "已绑定":"未绑定"}}</text>
					<u-icon size="35" color="#BBBBBB" name="arrow-right"></u-icon>
				</view>
			</view>

		</view>

		<u-modal @confirm="confirm" title="系统提示" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.show">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;padding:0 30rpx;">
				<text>您的手机已认证，修改认证手机您的登录手机号将同步修改，是否继续？</text>
			</view>
		</u-modal>

		<u-modal @confirm="qqconfirm" title="系统提示" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="false" v-model="data.qqshow">
			<view class="slot-content"
				style="height: 200rpx; display: flex;flex-direction:column; center;justify-content: center;padding:0 30rpx;align-items: center;">
				<text>暂不支持此功能</text>
				<text>如需使用请联系网站客服</text>
			</view>
		</u-modal>
		<u-modal confirm-text="知道了" @confirm="weixinbind" title="微信认证" :mask-close-able="true"
			:title-style="data.titleStyle" :show-cancel-button="false" v-model="data.weixinshow">
			<view class="slot-content">
				<text class="weione">截屏保存二维码图片，关注公众号</text>
				<u-image width="400" height="400" :src="data.imgurl">
					<template v-slot:loading>
						<u-loading></u-loading>
					</template>
				</u-image>
				<text class="weitwo">微信内使用“扫一扫”打开图片，识别关注公众号完成绑定操作，绑定后即可随时随地接受最新的消息通知，还可使用微信快速登录网站。</text>
			</view>
		</u-modal>


	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const data = reactive({
		userdata: {},
		show: false,
		titleStyle: {
			'font-size': '32rpx',
			'color': '#000',
			'font-weight': 'bold'
		},
		qqshow: false,
		weixinshow: false,
		imgurl: ""
	})
	const getaccount = async () => {

		let res = await uni.$u.api.account({})
		if (res) {
			data.userdata = res
		}
	}

	const confirm = () => {
		uni.$u.route("pages/pagesPersonal/set/bindaccount/child", {
			mobile: data.userdata.mobile
		})
	}

	const qqconfirm = () => {
		data.qqshow = false
	}
	const weixinbind = () => {

	}
	const touser = (i) => {

		switch (i) {
			case 1:
				data.show = true;
				break;
			case 2:
				uni.$u.route("pages/pagesPersonal/set/bindaccount/email", {
					email: data.userdata.email
				})
				break;
			case 3:

				data.qqshow = true
				break;
			case 4:

				data.weixinshow = true
				qrcode()
				break;
		}

	}

	const qrcode = async () => {
		let params = {
			type: "bind_weixin"
		}
		let res = await uni.$u.api.qrcode({
			params
		})
		if (res) {
			data.imgurl = res

		}
	}

	const goBack = () => {
		uni.$u.route({
			type: 'back'
		})
	}

	onShow(() => {
		getaccount()
	})
</script>

<style lang="scss" scoped>
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #f8f8f8;
	}

	.container {
		background-color: #fff;
		width: 100%;
		height: 100%;
		padding: 30rpx;

		.newsList {
			width: 100%;
			height: 140rpx;
			border-bottom: 1rpx solid #BBBBBB;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10rpx;
			color: #101010;
			font-size: 28rpx;

			.left {
				font-size: 36rpx;
				color: #101010;
			}

			.right {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.slot-content {
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30rpx;
		align-items: center;
		font-size: 24rpx;
		margin: 20rpx 0;
		color: #888888;

		.weione {
			color: #ff6a08;
			margin-bottom: 20rpx;
		}

		.weitwo {
			margin-top: 20rpx;
		}

	}
</style>